<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const keyword = ref('')

// 执行搜索
const performSearch = () => {
  const searchQuery = keyword.value.trim()
  if (searchQuery) {
    router.push({
      path: '/search',
      query: { q: searchQuery }
    })
  }
}
</script>

<template>
  <div class="search-container">
    <el-input
      :prefix-icon="Search"
      v-model="keyword"
      placeholder="搜索商品"
      clearable
      @keyup.enter="performSearch"
    >
      <template #append>
        <el-button @click="performSearch" type="primary">
          搜索
        </el-button>
      </template>
    </el-input>
  </div>
</template>

<style scoped>
.search-container {
  width: 300px;
  margin-top: 33px;
  margin-bottom: 45px;
}

:deep(.el-input) {
  --el-input-height-large: 40px;
}

:deep(.el-input__inner) {
  font-size: 16px;
  border-radius: 4px 0 0 4px;
}

:deep(.el-button) {
  height: 40px;
  font-size: 16px;
  border-radius: 0 4px 4px 0;
  --el-button-font-weight: 600;
}
</style>

